<template>
  <view class="page">
    <view class="main">
      <Card>
        <CollapseBox title="托管班：一年级（A）班" value="5人">
          <view class="form-item" @click="showTeacherPopup = true">
            <u-text text="请选择班主任" size="24rpx" color="#333" bold></u-text>
            <u-icon name="arrow-down" size="24rpx" color="#999"></u-icon>
          </view>
          <view class="form-item" @click="showOverDate = true">
            <u-text text="请选择结束日期" size="24rpx" color="#333" bold></u-text>
            <u-icon name="arrow-down" size="24rpx" color="#999"></u-icon>
          </view>
          <view class="form-item" @click="showClassTypePopup = true">
            <u-text text="请选择讲师" size="24rpx" color="#333" bold></u-text>
            <u-icon name="arrow-down" size="24rpx" color="#999"></u-icon>
          </view>
          <view class="form-item" @click="showClassroomPopup = true">
            <u-text text="请选择教室" size="24rpx" color="#333" bold></u-text>
            <u-icon name="arrow-down" size="24rpx" color="#999"></u-icon>
          </view>
          <view class="flex gap">
            <view class="form-item flex-1" @click="showStartDate = true">
              <u-text :text="formData.startDate ? dayjs(formData.startDate).format('YYYY-MM-DD') : '请选择开始日期'"
                size="24rpx" :color="formData.startDate ? '#333' : '#999'"></u-text>
              <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
            </view>
            <view class="form-item flex-1" @click="showEndDate = true">
              <u-text :text="formData.endDate ? dayjs(formData.endDate).format('YYYY-MM-DD') : '请选择结束日期'" size="24rpx"
                :color="formData.endDate ? '#333' : '#999'"></u-text>
              <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
            </view>
          </view>
          <u-cell-group :border="false">
            <u-cell :border="false" title="张三">
              <template #icon>
                <u-avatar shape="circle" src="https://picsum.photos/200/300?random=100" size="40rpx"></u-avatar>
              </template>
              <template #right-icon>
                <u-icon name="/static/image/principal/icon-move.png" size="32rpx" color="#999"></u-icon>
              </template>
            </u-cell>
          </u-cell-group>
        </CollapseBox>
      </Card>

      <!-- 班主任 -->
      <up-picker :closeOnClickOverlay="true" :show="showTeacherPopup" :columns="teacherList"
        @close="showTeacherPopup = false" @confirm="handleTeacherConfirm"></up-picker>
      <!-- 结束时间选择器 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showOverDate" mode="date" format="YYYY-MM-DD"
        @close="showOverDate = false" @cancel="showOverDate = false"
        @confirm="handleEndDateConfirm"></up-datetime-picker>

      <!-- 讲师 -->
      <up-picker :closeOnClickOverlay="true" :show="showClassTypePopup" :columns="teacherList"
        @close="showClassTypePopup = false" @confirm="handleClassTypeConfirm"></up-picker>

      <!-- 教室 -->
      <up-picker :closeOnClickOverlay="true" :show="showClassroomPopup" :columns="classroomList"
        @close="showClassroomPopup = false" @confirm="handleClassroomConfirm"></up-picker>

      <!-- 开始时间选择器 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showStartDate" mode="date" format="YYYY-MM-DD"
        @cancel="showStartDate = false" @confirm="handleStartDateConfirm"></up-datetime-picker>
      <!-- 结束时间选择器 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showEndDate" mode="date" format="YYYY-MM-DD"
        @cancel="showEndDate = false" @confirm="handleEndDateConfirm"></up-datetime-picker>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="一键分班" @click="toPreview"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import CollapseBox from '@/components/CollapseBox/index.vue';
import Card from '@/components/Card/index.vue';
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeTertiary } = useTheme();

const showTeacherPopup = ref(false);
const showOverDate = ref(false);
const showClassTypePopup = ref(false);
const showClassroomPopup = ref(false);
const showStartDate = ref(false);
const showEndDate = ref(false);

const teacherList = ref([['张三', '李四', '王五']]);
const classTypeList = ref([['数学', '语文', '英语']]);
const classroomList = ref([['教室1', '教室2', '教室3']]);

const formData = ref({
  startDate: '',
  endDate: '',
  teacher: null,
  classType: null,
  classroom: null,
});
</script>
<style scoped lang="scss"></style>